<template>
  <!-- v-loading="true" -->
  <div>
    <pageSearch :searchFormConfig="searchFormConfig" @searchSubmit="searchSubmit" />
    <pageTable :tableData="tableData" :tableInit="params.tableInit" @sizeChange="sizeChange"
      @currentChange="currentChange" @exportFn="exportExcel" v-loading="loading" @pageAdd="openDialogFn('新增')">

      <template #logimage="{ row }">
        <el-image v-if='row.logimage' style="width: 100px; height: 100px;z-index: 9999999;" :src="getPicImg(row.logimage)"
          :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" :preview-src-list="[getPicImg(row.logimage)]"
          :preview-teleported='true' :initial-index="4" fit="cover" />
      </template>
      <template #link="{ row }">
        <el-link :href="row.link" target="_blank">{{ row.link }}</el-link>
      </template>

      <template #operation="{ row }">
        <el-button type="primary" link @click="openDialogFn('编辑', row)">编辑</el-button>
        <el-popconfirm title="确认要删除吗?" @confirm="delData(row.id)">
          <template #reference>
            <el-button type="danger" link>删除</el-button>
          </template>
        </el-popconfirm>
      </template>



    </pageTable>

    <Dialog width="30%" top="20vh" ref="DialogRef" :title="typeText" @submit="submitForm(ruleFormRef)"
      @onclose="resetForm(ruleFormRef)">
      <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="120px" class="demo-ruleForm">

        <el-row :gutter="20">



          <el-col :span="24">
            <el-form-item label="供应商分类" prop="typename">
              <el-input v-model="ruleForm.typename" autocomplete="off" placeholder="请输入供应商分类" />
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="供应商名称" prop="name">
              <el-input v-model="ruleForm.name" autocomplete="off" placeholder="请输入供应商名称" />
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="Logo" prop="imagelist">
              <LTUpload tip="建议图片尺寸240 x 120" v-model="ruleForm.imagelist"></LTUpload>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="供应商地址" prop="sf" required>
              <my-area ref="myAreaREF" @celarArea="celarArea" @area-change="areaChange" />
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="详细地址" prop="address">
              <el-input v-model="ruleForm.address" autocomplete="off" placeholder="请输入详细地址" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="邮政编码" prop="yb">
              <el-input v-model="ruleForm.yb" autocomplete="off" placeholder="请输入邮政编码" />
            </el-form-item>
          </el-col>


          <el-col :span="12">
            <el-form-item label="电话" prop="telno">
              <el-input v-model="ruleForm.telno" autocomplete="off" placeholder="请输入电话" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="传真" prop="gscz">
              <el-input v-model="ruleForm.gscz" autocomplete="off" placeholder="请输入传真" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="网址">
              <el-input v-model="ruleForm.link" autocomplete="off" placeholder="请输入公司网址" />
            </el-form-item>
          </el-col>


          <el-col :span="12">
            <el-form-item label="联系人姓名" prop="caller">
              <el-input v-model="ruleForm.caller" autocomplete="off" placeholder="请输入联系人姓名" />
            </el-form-item>
          </el-col>


          <el-col :span="12">
            <el-form-item label="联系人联系电话" prop="phone">
              <el-input v-model="ruleForm.phone" autocomplete="off" placeholder="请输入联系人联系电话" />
            </el-form-item>
          </el-col>


          <el-col :span="12">
            <el-form-item label="联系人邮箱" prop="email">
              <el-input v-model="ruleForm.email" autocomplete="off" placeholder="请输入联系人邮箱" />
            </el-form-item>
          </el-col>


        </el-row>
      </el-form>
    </Dialog>




  </div>
</template>

<script setup lang="ts">
import pageTable from "@/components/base-ui/page-table";
import pageSearch from "@/components/base-ui/page-search";
import { Plus } from '@element-plus/icons-vue'
import Dialog from "@/components/base-ui/dialog";
import { reactive, ref, computed } from 'vue'
import type { FormInstance, FormRules, UploadProps, UploadUserFile } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import { clone } from "@pureadmin/utils";
import { randomNumber } from '@/utils/xwCommon'
import { tableInit } from "./config/authTable.config";
import { searchFormConfig } from "./config/authSearch.config";
import { usepageTable } from '@/components/base-ui/page-table/usePageTable'
import myArea from '@/components/myArea/index.vue'
import { authorizeddealerselpage, authorizeddealeraddauthorized, authorizeddealerupdateauthorized, authorizeddealerdelinfo } from '@/api/shop'
import LTUpload from '@/components/base-ui/upload'
import { getPicImg, geturlneeddl, uploadUrl } from '@/api/upload'



// 表格

const {
  exportExcel,
  tableData,
  getData,
  params,
  loading,
  sizeChange,
  currentChange,
  delData,
  filterStatus,
  DialogRef,
  openDialog,
  searchSubmit,
  amendData,
  addData
} = usepageTable({
  tableInit,
  getRes: authorizeddealerselpage,
  delRes: authorizeddealerdelinfo,
  addRes: authorizeddealeraddauthorized,
  updateRes: authorizeddealerupdateauthorized
})

getData()






const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
  typename: '', //分类
  name: '',   //公司名称
  logimage: '',//log图片
  imagelist: [],
  sf: '',
  djs: '',
  area: '',
  address: '',
  yb: '',
  telno: '',
  gscz: '',
  link: '',
  caller: '',
  phone: '',
  email: '',
  id: '',
  djsno: '',
  areano: '',
  sfno: ''

})

const validateList = (rule: any, value: any, callback: any) => {
  if (!ruleForm.sf || !ruleForm.djs || !ruleForm.area) {
    callback(new Error('请正确选择地址'))
  } else {
    callback()
  }
  // if (!ruleForm.djs) {
  //   console.log(ruleForm.djs)

  //   callback(new Error('请选择市'))
  // }
  // if (!ruleForm.area) {
  //   console.log(ruleForm.area)

  //   callback(new Error('请选择区'))
  // }
}


const rules = reactive<FormRules<typeof ruleForm>>({
  typename: [{ required: true, message: '请填写供应商分类', trigger: 'blur' }],
  name: [{ required: true, message: '请填写供应商名称', trigger: 'blur' }],
  imagelist: [{ required: true, message: '请上传Logo', trigger: 'blur' }],
  address: [{ required: true, message: '请填写详细地址', trigger: 'blur' }],
  yb: [{ required: true, message: '请填写邮编', trigger: 'blur' }],
  telno: [{ required: true, message: '请填写公司电话', trigger: 'blur' }],
  gscz: [{ required: true, message: '请填写公司传真', trigger: 'blur' }],
  link: [{ required: true, message: '请填写公司网址', trigger: 'blur' }],
  caller: [{ required: true, message: '请填写联系人姓名', trigger: 'blur' }],
  phone: [{ required: true, message: '请填写联系人电话', trigger: 'blur' }],
  email: [{ required: true, message: '请填写联系人邮箱', trigger: 'blur' }],
  sf: [
    { validator: validateList, trigger: 'blur' }
  ],

})
const typeText = ref('')
const openDialogFn = (text, row) => {
  console.log(row)
  typeText.value = text
  if (row) {
    const temporary = clone(row, true);
    Object.keys(ruleForm).forEach((key) => ruleForm[key] = temporary[key])
    ruleForm.imagelist = [{
      name: '图片',
      url: getPicImg(temporary.logimage)
    }]
    openDialog()
    setTimeout(() => {
      myAreaREF.value.clearFrom({
        city: temporary.djsno,
        area: temporary.areano,
        province: temporary.sfno,
      })
    }, 500);
  } else {
    openDialog()
  }

}


const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  console.log(formEl, 'formEl')

  formEl.validate((valid) => {
    if (valid) {
      let fn = typeText.value == '新增' ? addData : amendData
      ruleForm.logimage = ruleForm.imagelist[0]?.response?.data?.result[0]?.uuid || ruleForm.logimage,
        fn(ruleForm)
    } else {
      console.log('error submit!')
      return false
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()

  ruleForm.typename = '' //分类
  ruleForm.name = ''  //公司名称
  ruleForm.logimage = ''//log图片
  ruleForm.imagelist = []
  ruleForm.sf = ''
  ruleForm.djs = ''
  ruleForm.area = ''
  ruleForm.address = ''
  ruleForm.yb = ''
  ruleForm.telno = ''
  ruleForm.gscz = ''
  ruleForm.link = ''
  ruleForm.caller = ''
  ruleForm.phone = ''
  ruleForm.email = ''
  ruleForm.id = ''
  ruleForm.djsno = ''
  ruleForm.areano = ''
  ruleForm.sfno = ''

  // myAreaREF.value.clearFrom()
}



const myAreaREF = ref(null)

const areaChange = (e) => {
  console.log(e)
  ruleForm.sf = e.province.name
  ruleForm.djs = e.city.name
  ruleForm.area = e.area.name

  ruleForm.djsno = e.city.code
  ruleForm.areano = e.area.code
  ruleForm.sfno = e.province.code
}
const celarArea = () => {
  ruleForm.sf = ''
  ruleForm.djs = ''
  ruleForm.area = ''
  ruleForm.djsno = ''
  ruleForm.areano = ''
  ruleForm.sfno = ''
}


</script>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>